<template>
  <view class="category-card">
    <image :src="item.logo ?? categoryImg" class="category-image" />
    <text class="category-title">{{ item.label }}</text>
    <view v-if="!hiddenNext">
      <uv-icon name="arrow-right" color="#AAAAAA" size="20"></uv-icon>
    </view>
  </view>
</template>

<script setup>
import categoryImg from "@/static/images/search/category-icon.png"
const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  hiddenNext:{
    type: Boolean,
    required: false
  }
})
</script>

<style scoped>
.category-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 16px;
  margin: 10px;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  margin-bottom: 10px;
}

.category-image {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  margin-right: 12px;
}

.category-title {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.select-button {
  padding: 6px 12px;
  background-color: #007AFF;
  color: white;
  border-radius: 4px;
  border: none;
}
</style>